<template>
	<div class="content">
		<div class="search_input">
			<van-search @focus="focus(value)" @input="show_suggest" @search="search"  shape="round" clear-trigger="always" v-model="value" placeholder="请输入搜索关键词" />
		</div>
		<div class="search_suggest" v-show="suggest_switch">
			<div v-if="value" class="searching_what">
				搜索"{{value}}"
			</div>
			<div class="suggest">
				<ul>
					<li class="suggest_item" v-for="(item, index) in search_suggest" :key="index" @click="search">
						<i class="iconfont icon-fangdajing"></i>
						<span class="suggest_word">{{item.keyword}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="hot_history" v-show="showSearch">
			<div class="hot_search">
				<div class="hot_search_title">热门搜索</div>
				<hot_search_unit v-on:button_event="receive_search" :hot_search="hot_search"></hot_search_unit>
			</div>
			<div class="search_history">
				<search_history v-on:click_history="click_history" v-on:delete_history_son="delete_history_arr" :history_arr="history_arr"></search_history>
			</div>
		</div>
		<div class="search_result" v-show="search_result_switch">
			<newest_music v-for="(item, index) in search_result" :key = "index"
			:song_name = "item.name"
			:artists_name = "item.artists"
			:album_name = "item.album.name"
			:song_id = "item.id"
			:picUrl = 'item.picUrl'
			:id_list = 'id_list'
			:idx = 'index'
			></newest_music>
		</div>
	</div>
</template>

<script>
	
	import {get_hot_search} from '../../API/search.js';
	import hot_search_unit from './Rank/hot_search.vue';
	import search_history from './Rank/search_history.vue';
	import {go_search} from '../../API/search.js';
	import newest_music from './Recommand/newest_music.vue';
	import { get_search_suggest } from '../../API/search.js';
	
	export default{
		data() {
			return{
				value:"",
				hot_search:[],
				history_arr:[],
				search_result:[],
				showSearch:true,
				suggest_arr:[],
				suggest_switch: false,
				search_result_switch: false,
				search_suggest: [],
				id_list:[],
			};	
		},
		methods:{
			search() {
				
				this.history_arr.unshift(this.value);
				this.history_arr = Array.from(new Set(this.history_arr));
				go_search(this.value).then(res => {
					
					this.search_result = res.data.result.songs.slice(0,20);
					console.log(this.search_result,'limit 20搜索结果');
					this.id_list = this.search_result.map(el => {
						return el.id;
					})
				})
				this.suggest_switch = false;
				this.showSearch = false;
				this.search_result_switch = true;
			},
			receive_search(msg) {
				this.value = msg;
				this.search();
			},
			
			delete_history_arr(index) {
				this.history_arr.splice(index, 1);
			},
			focus() {

				if(this.value){
					this.suggest_switch = true;
					this.showSearch = false;
					this.search_result_switch = false;
				}else{
					this.suggest_switch = false;
					this.showSearch = true;
					this.search_result_switch = false;
				}
			},
			show_suggest(value) {
				if(value){
					get_search_suggest(value).then(res => {
						
						this.search_suggest = res.data.result.allMatch;
						// console.log(this.search_suggest,111111111);
					})
					this.suggest_switch = true;
					this.showSearch = false;
					this.search_result_switch = false;
				}else{
					this.suggest_switch = false;
					this.showSearch = true;
					this.search_result_switch = false;
				}
				
			},
			click_history(item) {
				this.value = item;
				this.search();
			}
		},
		components:{
			hot_search_unit,
			search_history,
			newest_music
		},
		created() {
			get_hot_search().then(res=>{
				console.log(res.data.result.hots,"search");
				this.hot_search = res.data.result.hots;
			})
			
		}
		
	}
</script>


<style lang="scss" scoped>
	.content{
		padding-top: 124px;
		.search_input{
			// display: flex;
			// align-items: center;
			// height: 60px;
			// padding: 15px 10px;
			border-bottom: 1px solid lightgray;
			.van-search{
				padding: 19px 12px;
			}
		}
		.search_suggest{
			.suggest{
				.suggest_item{
					display: flex;
					align-items: center;
					height: 45px;
					text-align: left;
					padding-left: 10px;
					.icon-fangdajing{
						margin-right: 7px;
						
					}
					.suggest_word{
						font-size: 15px;
						border-bottom: 1px solid lightgray;
						flex: 1 auto;
						height: 45px;
						line-height: 45px;
					}
				}
			}
		}
		.hot_search{
			text-align: left;
			font-size: 12px;
			padding: 15px 10px 0;
		}
	}
</style>